this.$emit带参数传递

发表于 | 阅读次数: | 本文总阅读量 次

前言

最近在做一个关于openlayer地图的项目，但是是基于Vue项目的基础上的，我在获取经纬度的时候想要将子组件获得的经纬度信息传递给父组件，然后将他传回来的值赋给我的input框里。废话不多说，赶紧来记录一下

子组件中this.$emit(‘对应的名字’, 参数)

代码如下：

1
2
3
4
<button v-for="(btn, $index) in btns" :key="btn + $index" @click="onClickBtn(btn)"> </button>
onClickBtn() {
  this.$emit('click-btn', btn);
}

在父组件中的对应引入的组件中添加监听v-on:对应的名字=”函数名” ，然后定义对应的函数赋值

1
2
3
4
<coupon-detail :click-btn="clickBtn"></coupon-detail>
clickBtn(data) {
// 这里就有btn的值啦
}

这里传回来的值在data里

总结：

  1. 监听的时候 触发的方法只写方法名,不能加（）否则就接收不到传过来的数据了
  2. 多参数传递的写法： this.$emit(‘对应的名字’, 参数1， 参数2)
  3. 在这里说一下openlayers的经纬度转换方式，
    在监听事件下可以获取到地图上的xy坐标，由于我们这里需要小数表示，所以需要转换一下，其中location[0].toFixed(6)的意思是将它后面的小数点保留6位数。